Тригонометричні функції CSS: математичні розрахунки макетів для динамічних дизайнів

CSS, традиційно відомий для стилізації статичних елементів, еволюціонував, щоб запропонувати потужні інструменти для динамічного та адаптивного веб-дизайну. Серед них — тригонометричні функції, які дозволяють розробникам використовувати математичні принципи безпосередньо у своєму CSS. Ця стаття розглядає, як використовувати `sin()`, `cos()`, `tan()`, `asin()`, `acos()`, `atan()` та `atan2()` для створення складних, динамічних і математично точних макетів.

Розуміння тригонометричних функцій CSS

Тригонометричні функції в CSS дозволяють виконувати обчислення на основі кутів, отримуючи значення, які можна використовувати для різних властивостей CSS, таких як `transform`, `width`, `height` тощо. Це відкриває можливості для створення кругових макетів, складних анімацій та адаптивних дизайнів, які математично пристосовуються до різних розмірів екрана.

Основні функції: sin(), cos() і tan()

Ці функції є основою тригонометричних обчислень:

• `sin(angle)`: Повертає синус кута. Кут необхідно вказувати в одиницях, таких як `deg` (градуси), `rad` (радіани), `grad` (гради) або `turn` (оберти). Значення синуса знаходяться в діапазоні від -1 до 1.
• `cos(angle)`: Повертає косинус кута. Подібно до `sin()`, кут необхідно вказувати в одиницях. Значення косинуса також знаходяться в діапазоні від -1 до 1.
• `tan(angle)`: Повертає тангенс кута. Кут вказується в одиницях. Значення тангенса можуть варіюватися від мінус нескінченності до плюс нескінченності.

Обернені тригонометричні функції: asin(), acos(), atan() і atan2()

Обернені тригонометричні функції дозволяють обчислити кут на основі відомого співвідношення:

• `asin(number)`: Повертає арксинус (обернений синус) числа. Число має бути в діапазоні від -1 до 1. Результатом є кут у радіанах.
• `acos(number)`: Повертає арккосинус (обернений косинус) числа. Число має бути в діапазоні від -1 до 1. Результатом є кут у радіанах.
• `atan(number)`: Повертає арктангенс (обернений тангенс) числа. Результатом є кут у радіанах.
• `atan2(y, x)`: Повертає арктангенс від y/x, використовуючи знаки обох аргументів для визначення квадранта результату. Це має вирішальне значення для визначення правильного кута при роботі з координатами. Результатом є кут у радіанах.

Практичні застосування та приклади

Розглянемо кілька практичних застосувань тригонометричних функцій CSS.

1. Створення кругового макета

Одним із поширених випадків є розміщення елементів по колу. Цього можна досягти, обчисливши позицію кожного елемента на основі його індексу та загальної кількості елементів, використовуючи `sin()` і `cos()` для визначення координат x та y відносно центру кола.

HTML:

            <div class="circle-container">
 <div class="item">1</div>
 <div class="item">2</div>
 <div class="item">3</div>
 <div class="item">4</div>
 <div class="item">5</div>
 </div>
            

              
                Copy
              
            
          

CSS:

            .circle-container {
 position: relative;
 width: 200px;
 height: 200px;
 border: 1px solid black;
 border-radius: 50%;
 margin: 50px auto;
}

.item {
 position: absolute;
 width: 30px;
 height: 30px;
 border-radius: 50%;
 background-color: lightblue;
 text-align: center;
 line-height: 30px;
}

.circle-container .item:nth-child(1) {
 top: calc(50% + sin(calc(1 * 360deg / 5)) * 85px - 15px);
 left: calc(50% + cos(calc(1 * 360deg / 5)) * 85px - 15px);
}

.circle-container .item:nth-child(2) {
 top: calc(50% + sin(calc(2 * 360deg / 5)) * 85px - 15px);
 left: calc(50% + cos(calc(2 * 360deg / 5)) * 85px - 15px);
}

.circle-container .item:nth-child(3) {
 top: calc(50% + sin(calc(3 * 360deg / 5)) * 85px - 15px);
 left: calc(50% + cos(calc(3 * 360deg / 5)) * 85px - 15px);
}

.circle-container .item:nth-child(4) {
 top: calc(50% + sin(calc(4 * 360deg / 5)) * 85px - 15px);
 left: calc(50% + cos(calc(4 * 360deg / 5)) * 85px - 15px);
}

.circle-container .item:nth-child(5) {
 top: calc(50% + sin(calc(5 * 360deg / 5)) * 85px - 15px);
 left: calc(50% + cos(calc(5 * 360deg / 5)) * 85px - 15px);
}

            

              
                Copy
              
            
          

У цьому прикладі ми обчислюємо позицію кожного елемента `.item` за допомогою `sin()` і `cos()`. Кут визначається діленням 360 градусів на кількість елементів (5) і множенням на індекс елемента. Отримані значення `sin()` і `cos()` потім використовуються для обчислення позицій `top` і `left`, ефективно розміщуючи елементи по колу. Значення `85px` представляє радіус кола, а `15px` — це зміщення для врахування розміру елемента.

2. Створення хвилеподібних анімацій

Тригонометричні функції чудово підходять для створення плавних, хвилеподібних анімацій. Ви можете використовувати `sin()` або `cos()` для модуляції положення, прозорості чи інших властивостей елемента з часом.

HTML:

            <div class="wave-container">
 <div class="wave-item"></div>
</div>
            

              
                Copy
              
            
          

CSS:

            .wave-container {
 width: 100%;
 height: 100px;
 overflow: hidden;
 position: relative;
}

.wave-item {
 position: absolute;
 width: 200%;
 height: 100%;
 background-color: lightblue;
 animation: wave 5s linear infinite;
}

@keyframes wave {
 0% {
 transform: translateX(0) translateY(calc(sin(0deg) * 20px));
 }
 50% {
 transform: translateX(-50%) translateY(calc(sin(180deg) * 20px));
 }
 100% {
 transform: translateX(-100%) translateY(calc(sin(360deg) * 20px));
 }
}

            

              
                Copy
              
            
          

У цьому прикладі анімація `wave` використовує `sin()` для обчислення вертикального положення (`translateY`) елемента `.wave-item`. У міру виконання анімації значення синуса змінюється, створюючи плавний, хвилеподібний ефект. `translateX` забезпечує безперервний рух хвилі.

3. Створення адаптивних дуг і кривих

Тригонометричні функції CSS можна поєднувати з одиницями вимірювання області перегляду (як `vw` та `vh`) для створення адаптивних дуг і кривих, що пристосовуються до різних розмірів екрана.

HTML:

            <div class="arc-container">
 <div class="arc-element"></div>
</div>
            

              
                Copy
              
            
          

CSS:

            .arc-container {
 width: 100vw;
 height: 50vh;
 position: relative;
 overflow: hidden;
}

.arc-element {
 position: absolute;
 width: 20px;
 height: 20px;
 border-radius: 50%;
 background-color: red;
 left: calc(50vw + cos(var(--angle)) * 40vw - 10px);
 top: calc(50vh + sin(var(--angle)) * 20vh - 10px);
 animation: arc 5s linear infinite;
}

@keyframes arc {
 0% {
 --angle: 0deg;
 }
 100% {
 --angle: 360deg;
 }
}

            

              
                Copy
              
            
          

У цьому прикладі ми використовуємо кастомні властивості CSS (`--angle`) та тригонометричні функції для позиціонування `.arc-element` вздовж дуги. Властивості `left` і `top` обчислюються на основі `cos()` і `sin()` відповідно, причому кут змінюється з часом завдяки анімації `arc`. Одиниці вимірювання області перегляду (`vw` та `vh`) забезпечують пропорційну адаптацію дуги до розміру екрана.

4. Обчислення відстаней за допомогою `atan2()`

`atan2()` може визначати кут між двома точками, що корисно для створення ефектів, де елементи реагують на положення один одного.

Розглянемо сценарій, де у вас є два елементи, і ви хочете обертати один так, щоб він завжди вказував на інший:

HTML:

            <div class="container">
 <div class="target">Target</div>
 <div class="pointer">Pointer</div>
</div>
            

              
                Copy
              
            
          

CSS (with JavaScript):

            .container {
 position: relative;
 width: 300px;
 height: 300px;
 border: 1px solid black;
 margin: 50px auto;
}

.target {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 50px;
 height: 50px;
 background-color: lightcoral;
 text-align: center;
 line-height: 50px;
}

.pointer {
 position: absolute;
 top: 20%;
 left: 50%;
 transform: translateX(-50%);
 width: 80px;
 height: 20px;
 background-color: lightgreen;
 text-align: center;
 line-height: 20px;
 transform-origin: left center; /* Important for correct rotation */
}

            

              
                Copy
              
            
          

JavaScript:

            const target = document.querySelector('.target');
const pointer = document.querySelector('.pointer');
const container = document.querySelector('.container');

container.addEventListener('mousemove', (e) => {
 const containerRect = container.getBoundingClientRect();
 const targetRect = target.getBoundingClientRect();

 const centerX = containerRect.left + containerRect.width / 2;
 const centerY = containerRect.top + containerRect.height / 2;

 const angle = Math.atan2(e.clientY - centerY, e.clientX - centerX) * 180 / Math.PI;

 pointer.style.transform = `translateX(-50%) rotate(${angle}deg)`;
});

            

              
                Copy
              
            
          

У цьому прикладі JavaScript використовується для отримання координат миші відносно контейнера. `Math.atan2()` обчислює кут між центром контейнера (який виступає початком координат) та позицією миші. Цей кут потім використовується для обертання елемента `.pointer`, забезпечуючи, щоб він завжди вказував на курсор миші. `transform-origin: left center;` має вирішальне значення для правильного обертання вказівника навколо його лівої центральної точки.

Переваги використання тригонометричних функцій у CSS

• Динамічні та адаптивні дизайни: Створюйте макети, які математично адаптуються до різних розмірів екрана та роздільної здатності.
• Складні анімації: Генеруйте плавні, реалістичні анімації з хвилеподібними рухами та іншими складними візерунками.
• Математична точність: Досягайте точного позиціонування та розмірів елементів на основі тригонометричних обчислень.
• Зменшена залежність від JavaScript: Виконуйте обчислення безпосередньо в CSS, що зменшує потребу в складному коді JavaScript для макетування та анімації.
• Покращена продуктивність: Анімації та обчислення на основі CSS можуть бути більш продуктивними, ніж альтернативи на JavaScript, особливо для простих трансформацій.

Рекомендації та найкращі практики

• Сумісність з браузерами: Хоча тригонометричні функції добре підтримуються в сучасних браузерах, важливо перевіряти сумісність і надавати запасні варіанти (fallbacks) для старих браузерів. Розгляньте можливість використання бібліотеки, як-от PostCSS з плагінами для тригонометричних функцій, щоб покращити сумісність.
• Продуктивність: Складні обчислення можуть впливати на продуктивність, особливо при великій кількості елементів або частих оновленнях. Оптимізуйте свій код і використовуйте апаратне прискорення, де це можливо.
• Читабельність: Тригонометричні обчислення можуть ускладнити код CSS. Використовуйте коментарі та описові імена змінних, щоб покращити читабельність та зручність обслуговування.
• Тестування: Ретельно тестуйте свої дизайни на різних пристроях і браузерах, щоб забезпечити послідовну поведінку та адаптивність.

Висновок

Тригонометричні функції CSS надають потужний набір інструментів для створення динамічних, адаптивних і математично точних веб-дизайнів. Розуміючи та використовуючи ці функції, розробники можуть відкрити нові можливості для макетування, анімації та інтерактивних елементів, значно покращуючи користувацький досвід. Від кругових макетів і хвилеподібних анімацій до адаптивних дуг і позиціонування елементів — застосування є величезними та різноманітними. Хоча ретельний розгляд сумісності з браузерами, продуктивності та читабельності є важливим, переваги включення тригонометричних функцій у ваш робочий процес CSS незаперечні, дозволяючи створювати по-справжньому захоплюючі та витончені веб-досвіди. Оскільки CSS продовжує розвиватися, володіння цими техніками ставатиме все більш цінним для веб-дизайнерів і розробників у всьому світі.

Ці знання дозволяють створювати більш складні та візуально привабливі дизайни. Досліджуйте ці техніки та експериментуйте з різними параметрами, щоб розкрити повний потенціал тригонометричних функцій CSS у ваших проєктах веб-розробки.